<template>
    <div class="rootMain">
        <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            active-text-color="#409EFF"
        >
            <el-menu-item
                class="menuItem pointer"
                v-for="(item, index) in menuList"
                :key="index"
                :index="item.index"
                @click="clickMenu(item)"
                >{{ item.name }}</el-menu-item
            >
        </el-menu>
        <!-- 模板下载 -->
        <template v-if="activeIndex == '1'">
            <div style="background-color: #fff" class="flex">
                <div
                    class="type"
                    :class="{ typeSelected: currentIndex == index }"
                    v-for="(item, index) in typeList"
                    @click="chooseType(item, index)"
                    :key="index"
                >
                    {{ item.name }}
                </div>
            </div>
            <template v-if="downloadModel.length > 0">
                <div
                    @mouseenter="onMouseOver(item, index)"
                    @mouseleave="onMouseOut"
                    class="downloadList pointer"
                    v-for="(item, index) in downloadModel"
                    :key="index"
                >
                    <div class="flex" @click="goDetail(item)">
                        <!-- -------------- -->
                        <img
                            v-if="item.type == 1"
                            class="model_icon"
                            src="~/assets/images/index/model_word.png"
                            alt=""
                        />
                        <img
                            v-if="item.type == 4"
                            class="model_icon"
                            src="~/assets/images/index/model_ppt.png"
                            alt=""
                        />
                        <img
                            v-if="item.type == 2"
                            class="model_icon"
                            src="~/assets/images/index/model_excel.png"
                            alt=""
                        />
                        <img
                            v-if="item.type == 3"
                            class="model_icon"
                            src="~/assets/images/index/model_pdf.png"
                            alt=""
                        />
                        <img
                            v-if="item.type == 5"
                            class="model_icon"
                            src="~/assets/images/index/model_zips.png"
                            alt=""
                        />
                        <!-- -------- -->
                        <div class="title ellipsis2" @click="goDetail(item)">
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="info flex" @click="goDetail(item)">
                        <div class="time">{{ item.createtime }}</div>
                    </div>
                    <div
                        class="tips"
                        v-if="showTipsIndex == index"
                        @click="delModelDownload(index, 1)"
                    >
                        <img src="~/assets/images/userCenter/1_shanchu.png" alt="" />
                        <span class="c999 fz14 mt10">删除</span>
                    </div>
                </div>
                <!-- 分页 -->
                <div class="page">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :current-page="modelParams.page"
                        :page-size="modelParams.limit"
                        :total="count"
                        @current-change="changePage"
                    >
                    </el-pagination>
                </div>
            </template>
            <template v-else>
                <el-empty description="暂无数据"></el-empty>
            </template>
        </template>
        <!-- 讲义下载 -->
        <template v-else>
            <template v-if="downloadNote.length > 0">
                <div
                    @mouseenter="onMouseOver(item, index)"
                    @mouseleave="onMouseOut"
                    class="downloadList"
                    v-for="(item, index) in downloadNote"
                    :key="index"
                >
                    <div class="title">{{ item.content }}</div>
                    <div class="info flex">
                        <div class="time">{{ item.createtime }}</div>
                    </div>
                    <div
                        class="tips"
                        v-if="showTipsIndex == index"
                        @click="delModelDownload(index, 2)"
                    >
                        <img
                            src="~/assets/images/userCenter/1_shanchu.png"
                            alt=""
                        />
                        <span class="c999 fz14 mt10">删除</span>
                    </div>
                </div>
            </template>
            <template v-else>
                <el-empty description="暂无数据"></el-empty>
            </template>
        </template>
    </div>
</template>

<script>
import {
    myDownload,
    getNoteDownload,
    delModelDownload,
} from "@/assets/api/userCenterApi.js";

export default {
    name: "myDownload",
    head() {
        return {
            title: "个人中心-我的下载",
            meta: [],
        };
    },
    data() {
        return {
            // 模板参数
            modelParams: {
                type: 0,
                page: 1,
                limit: 10,
            },
            // 讲义参数
            noteParams: {
                page: 1,
                limit: 10,
            },
            count: 0,
            activeIndex: "1", //导航菜单
            currentIndex: 0, //子菜单
            showTipsIndex: -1, //展示右侧取消收藏的按钮的下标
            typeList: [
                { name: "全部" },
                {
                    name: "word",
                    index: "1",
                },
                {
                    name: "ppt",
                    index: "1",
                },
                {
                    name: "excel",
                    index: "1",
                },
                {
                    name: "pdf",
                    index: "1",
                },
                {
                    name: "zip",
                    index: "1",
                },
            ],
            menuList: [
                {
                    name: "模板下载",
                    index: "1",
                },
                // {
                //   name: "讲义下载",
                //   index: "2",
                // },
            ],
            downloadModel: [],
            downloadNote: [],
        };
    },
    mounted() {
        this.myDownload();
    },

    methods: {
        //鼠标移入
        onMouseOver(item, index) {
            this.showTipsIndex = index;
        },
        //鼠标移出
        onMouseOut() {
            this.showTipsIndex = -1;
        },
        //删除下载
        async delModelDownload(index, type) {
            this.$confirm("确定删除此模板吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.del(index, type);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        async del(index, type) {
            if (type == 1) {
                var params = {
                    id: this.downloadModel[index].id,
                };
            } else {
                var params = {
                    id: this.downloadNote[index].id,
                };
            }
            let res = await delModelDownload(params);
            if (res.code == 1) {
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
                this.downloadModel = [];
                this.downloadNote = [];
                this.page = 1;
                this.myDownload();
            }
        },

        // 筛选模板类型
        chooseType(item, index) {
            this.currentIndex = index;
            switch (index) {
                case 0:
                    this.modelParams.type = "";
                    this.myDownload();
                    break;
                case 1:
                    this.modelParams.type = 1;
                    this.myDownload();
                    break;
                case 2:
                    this.modelParams.type = 4;
                    this.myDownload();
                    break;
                case 3:
                    this.modelParams.type = 2;
                    this.myDownload();
                    break;
                case 4:
                    this.modelParams.type = 3;
                    this.myDownload();
                    break;
                case 5:
                    this.modelParams.type = 5;
                    this.myDownload();
                    break;
            }
        },

        //点击菜单按钮
        clickMenu(item) {
            this.activeIndex = item.index;
            if (item.index == "1") {
                this.myDownload();
            } else {
                this.getNoteDownload();
            }
        },
        // 请求模板数据
        async myDownload() {
            let res = await myDownload(this.modelParams);
            if (res.code == 1) {
                this.downloadModel = res.data.data;
                this.count = res.data.count;
            }
        },
        //请求讲义数据
        async getNoteDownload() {
            let res = await getNoteDownload(this.noteParams);
            if (res.code == 1) {
                this.downloadNote = res.data.data;
            }
        },
        //进详情
        goDetail(item) {
            console.log(item.id);
            this.$router.push({
                path: "/templates/" + item.id + '.html',
            });
        },

        //分页
        changePage(e) {
            this.modelParams.page = e;
            this.myDownload();
            this.toTop();
        },

        toTop() {
            document.documentElement.scrollTop = 0;
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.rootMain {
    background: #fff;
    margin-left: 20px;

    .type {
        margin: 10px;
        text-align: center;
        line-height: 29px;
        width: 72px;
        height: 29px;
        border-radius: 4px;
        color: #999999;
        border: 1px solid #999999;
        cursor: pointer;
    }
    .type:first-child {
        margin-left: 30px;
    }
    .typeSelected {
        background-color: #eaf4ff;
        border: 1px solid #1c87f3;
        color: #1c87f3;
    }

    .downloadList {
        position: relative;
        padding: 20px;
        background-color: #fff;
        border-bottom: 1px solid #f4f4f4;

        .model_icon {
            width: 22px;
            height: 22px;
            margin-right: 10px;
        }

        .title {
            width: 700px;
            font-size: 18px;
        }
        .info {
            font-size: 14px;
            margin-top: 30px;

            .time {
                color: #9e9e9e;
                margin-right: 20px;
            }
        }
        .tips {
            cursor: pointer;
            position: absolute;
            top: 47px;
            right: 37px;

            img {
                width: 26px;
                height: 26px;
                vertical-align: middle;
            }
        }
    }
    .page {
        padding-top: 13px;
        padding-bottom: 63px;
        display: flex;
        justify-content: center;
    }
}
</style>

<style lang="scss" scoped>
::v-deep .is-active {
    border-bottom-color: white !important;
}
</style>./mydownload.vue
